<template>
  <div class="box" ref="EchartsVc">
    地图组件
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';
//引入中国地图json数据
import chianJSON from './ChinaJson.json';

let EchartsVc = ref<any>();//dom元素

//注册中国地图
echarts.registerMap('china', chianJSON as any)

onMounted(() => {
  //注册中国地图
  let mychart = echarts.init(EchartsVc.value);
  //注册地图
  mychart.setOption({
    //地图组件
    geo: {
      map: 'china',
      roam: true,//鼠标漫游模式
      left: 0,
      top: 30,
      right: 30,
      bottom: 0,
      //地图上的文字设置
      label: {
        show: true,//显示文字
        color: 'white',
        fontSize: 15,
      },
      //每一个多边形的样式
      itemStyle: {
        color: 'orange',
        opacity: .8,

      },
      //地图高亮的效果
      emphasis: {
        itemStyle: {
          color: 'skyblue'
        },
        label: {
          fontSize: 20,
        }
      }
    },
    //布局位置
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0
    },
    //系列设置
    series: [
      //航线
      {
        type: 'lines',
        data: [
          //一条线的数据是一个对象
          {//BJ->FJ
            coords: [[116.405285, 39.904989], [119.306239, 26.075302]],
            lineStyle: {color: 'white', width: 5},
          },
          {//BJ->XZ
            coords: [[116.405285, 39.904989], [91.132212, 29.660361]],
            lineStyle: {color: 'white', width: 5},
          },
          {//BJ->XJ
            coords: [[116.405285, 39.904989], [87.617733, 43.792818]],
            lineStyle: {color: 'white', width: 5},
          },
          {//BJ->HEB
            coords: [[116.405285, 39.904989], [126.642464, 45.756967]],
            lineStyle: {color: 'white', width: 5},
          }
        ],
        //开启动画特效
        effect: {
          show: true,
          symbol: 'arrow',
          color: 'red',
          symbolSize: 15,
        }
      }
    ],

  })
});


</script>

<style scoped lang="scss">
.box{
  background: rgba(168, 178, 177, 0.35);
}
</style>